<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>备忘录</title>
</head>
<style>
</style>
<body>
    <input type="text" id="con" /><button id="save">保存
        <br />
    </button><button id="clear">清空本地存储</button>
    <br />
    <br />
    <!-- 全选<input type="checkbox"> -->
    任务列表：
    <ul></ul>
</body>
<script>
    window.onload = function () {
        save.onclick = saves //存储到本地
        clear.onclick = clearFun //删除本地存储
        showList() //刷新
    }
    function clearFun() { //删除本地存储 
        localStorage.clear()
        showList() //刷新
    }
    //添加任务
    function saves() { //存储到本地
        var val = document.getElementById('con').value
        saveLocal(val) //传值

    }
    function saveLocal(val) {
        var lists = localStorage.getItem('lists')
        if (lists == null) {
            localStorage.setItem('lists', JSON.stringify([val]))
        } else {
            lists = JSON.parse(lists)
            lists.push(val) //尾部添加
            localStorage.setItem('lists', JSON.stringify(lists))
        }
        showList()
    }
    function showList() { //渲染
        var lists = JSON.parse(localStorage.getItem('lists'))
        if (lists && lists.length > 0) {
            var str = ''
            for (i in lists) {
                str +=
                    '<li>任务' + (+i + 1) + ':' + lists[i] + ' <button onclick=del(' +
                    i +
                    ')>×</button><button>取消</button>  <input type="checkbox" id="m"></li>'
            }
            document.getElementsByTagName('ul')[0].innerHTML = str
        } else {
            document.getElementsByTagName('ul')[0].innerHTML = '暂无'
        }
    }
    function del(index) { //删除
        var lists = JSON.parse(localStorage.getItem('lists'))
        lists.splice(index, 1)//删除 下标
        localStorage.setItem('lists', JSON.stringify(lists))
        showList() //刷新





    }
</script>

</html>